<template>
  <div class="view-wrap">
    <template v-if="$route.name === 'MustKnows'">
      <main id="must-knows" class="page">
        <page-banner :bg_url="page.banner" />
        <div
          class="page-category sticky"
          v-scroll-spy-active="{selector: 'a.term-item'}"
          v-scroll-spy-link="{selector: 'a.term-item'}"
        >
          <span class="title">{{cate.title}}</span>
          <a
            class="term-item"
            v-for="(val,k) of page.category"
            :href="`#${k+1}`"
            :key="k"
            @click.prevent="$scrollTo(k)"
          >{{val}}</a>
        </div>
        <div v-scroll-spy="{offset: 140, allowNoActive: false}">
          <section class="section-container eligibility-container">
            <div class="section-wrap eligibility">
              <h2 class="spec-title" v-html="page.eligibility.title"></h2>
              <p class="spec-intro" v-text="page.eligibility.intro"></p>
              <ul class="list eligibility-list">
                <li class="list-item" v-for="(item,key) of page.must_eligibility" :key="key">
                  <div class="inner-item">
                    <h3 class="item-title">{{item.title}}</h3>
                    <div class="item-intro" v-html="item.intro"></div>
                    <div class="item-tips">{{item.tips}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </section>
          <section class="section-container bg-primary">
            <div class="section-wrap">
              <h2 class="spec-title" v-html="page.cate.title"></h2>
              <ul class="list categories">
                <li class="list-item" v-for="(item,key) of page.cate.list" :key="key">
                  <div class="inner-item">
                    <div class="item-img">
                      <img :src="item.thumb" :alt="item.title" class="fluid-img" />
                    </div>
                    <h3 class="item-title">{{item.title}}</h3>
                    <div class="item-intro" v-html="item.intro"></div>
                  </div>
                </li>
              </ul>
            </div>
          </section>
          <section class="section-container bg-grey">
            <h2 class="spec-title" v-html="page.fees.title"></h2>
            <p class="spec-intro" v-text="page.fees.intro"></p>
          </section>
          <section class="section-container" id="prizes">
            <div class="section-wrap">
              <h2 class="spec-title">PRIZES</h2>
              <div class="award-wrapper">
                <div class="award-wrap-list border-top" v-for="item of award.list" :key="item.type">
                  <h1 class="award-type">{{item.type}}</h1>
                  <ul>
                    <li v-for="subItem of item.items" :key="subItem.title">
                      <figure>
                        <img :src="subItem.thumb" :alt="item.type" class="fluid-img" />
                        <figcaption class="txt">
                          <h4 class="award-name">{{subItem.title}}</h4>
                          <p class="award-reward">
                            {{Number.isInteger(subItem.reward) ? subItem.reward+ ' RMB per winner' :
                            'Honorary prize'}}
                          </p>
                          <p class="award-amount">
                            {{Number.isInteger(subItem.amount)? 'X'+ subItem.amount :
                            subItem.amount}}
                          </p>
                        </figcaption>
                      </figure>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="index-about">
                <div class="info" v-html="award.description"></div>
              </div>
            </div>
          </section>
          <section class="section-container bg-primary">
            <div class="section-wrap">
              <h2 class="spec-title">TIMETABLE</h2>
              <ul class="schedule-list">
                <li v-for="item of schedule" :key="item.date" class="schedule-item">
                  <h3 class="schedule-title">{{item.date}}</h3>
                  <p class="schedule-intro">{{item.event}}</p>
                </li>
              </ul>
            </div>
          </section>

          <section class="section-container">
            <div class="section-wrap">
              <h2 class="spec-title">SUBMISSION</h2>
              <p class="spec-intro" v-text="page.submission.intro"></p>
              <ul class="list submission">
                <li v-for="(item,key) of page.submission.list" :key="key" class="list-item">
                  <div class="item-inner">
                    <h3 class="item-num">{{item.num}}</h3>
                    <div class="item-img">
                      <img :src="item.thumb" alt class="fluid-img" />
                    </div>
                    <div class="item-intro" v-html="item.intro"></div>
                  </div>
                </li>
              </ul>
              <div class="btn-wrap">
                <Button text="Enter Now" :to="{name: 'UserLogin'}" />
              </div>
            </div>
          </section>

          <section class="section-container bg-grey">
            <div class="section-wrap">
              <h2 class="spec-title">REQUISITES</h2>
              <ul class="list requisites">
                <li v-for="(item,key) of page.requisites.list" :key="key" class="list-item">
                  <p class="item-intro" v-html="item"></p>
                </li>
              </ul>
              <div class="btn-wrap">
                <Button text="Find your nominator here" :to="{name: 'Nomination'}" />
              </div>
            </div>
          </section>

          <section class="section-container bg-grey">
            <div class="section-wrap">
              <h2 class="spec-title" v-text="page.award.title"></h2>
              <p class="spec-intro" v-html="page.award.intro"></p>
            </div>
          </section>
        </div>
      </main>
    </template>

    <router-view v-else />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Button from "@/components/Button";
export default {
  name: "Sday",
  data() {
    return {
      page: {
        banner: {
          "background-image": `url(${require("@/assets/img/must-know.jpg")})`
        },
        category: [
          "Eligibility",
          "Categories",
          "Fees",
          "Prizes",
          "Timetable",
          "Submission",
          "Requisites",
          "Awarding Ceremony"
        ],
        eligibility: {
          title: "ELIGIBILITY",
          intro:
            "Professional designers or teams and design students from the member cities of the UNESCO Creative Cities Network (UCCN) who make outstanding contributions through their creativity can be registered as candidates for the SDAY."
        },
        cate: {
          title: "CATEGORIES",
          list: [
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/MustKnows/communication.png",
              title: "Communication",
              intro:
                "<p>Brand &amp; identity, packaging design, publica…ers, illustrations, information visualization</p>"
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/MustKnows/interactive.png",
              title: "Interactive media",
              intro:
                "<p>Interactive design, website UI design, PC and m… design, motion picture and television design</p>"
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/MustKnows/industrial.png",
              title: "Industrial design",
              intro: "<p>Automobile, furniture, product design</p>"
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/MustKnows/spatial.png",
              title: "Spatial design",
              intro:
                "<p>Architectural design, landscape design, interio…esign, urban and public guiding system design</p>"
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/MustKnows/fashion.png",
              title: "Fashion design",
              intro:
                "<p>Apparel, accessories, texture design, dyeing &amp; knitting</p>"
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/MustKnows/policy.png",
              title:
                "Public service design and design thinking in public policy",
              intro: ""
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/MustKnows/others.png",
              title: "Others",
              intro: ""
            }
          ]
        },
        fees: {
          title: "FEES",
          intro:
            "Registration, nominations and entries submissions are free. However, entrants are responsible for all logistic and insurance costs."
        },
        submission: {
          title: "SUBMISSION",
          intro:
            "All nominees must submit documents online at the official website of the SDAY before 18:00 Beijing Time (GMT+8:00), November 30, 2019 by finishing following steps (all materials must be in English)",
          list: [
            {
              thumb: require("@/assets/img/msub_01.jpg"),
              num: "01",
              intro:
                "<p>Read carefully and agree to the<em> Terms and Conditions.</em></p>"
            },
            {
              thumb: require("@/assets/img/msub_02.jpg"),
              num: "02",
              intro: "<p>Find your nominator on the nomination page.&nbsp;</p>"
            },
            {
              thumb: require("@/assets/img/msub_03.jpg"),
              num: "03",
              intro:
                "<p>Log in with&nbsp;username and password provided by your&nbsp;nominator.</p>"
            },
            {
              thumb: require("@/assets/img/msub_04.jpg"),
              num: "04",
              intro: "<p>Complete designer and project information.</p>"
            },
            {
              thumb: require("@/assets/img/msub_05.jpg"),
              num: "05",
              intro: "<p>Confirm and submit your projects.</p>"
            },
            {
              thumb: require("@/assets/img/msub_06.jpg"),
              num: "06",
              intro:
                "<p>Arrange shipping of your tangible projects&nbsp…e <em>Shipping Manual</em> in download page)</p>"
            }
          ]
        },
        requisites: {
          list: [
            ` <p line="dttn">The entries submitted by professionals shall be works that are complete, have been implemented&nbsp;or have become available on the market. The entries shall be completed between January 1, 2017 and October 31, 2019.</p><p line="dttn">&nbsp;</p><p line="4b0w">Conceptual designs or designs that are still under development and/or have not yet been commercially launched, as well as works for displaying, prototypes, renderings and artist’s impressions are eligible as entries only for the student group.</p>`,
            `<p line="GJOc"><strong>Entries submitted for the previous SDAY are NOT accepted for the 2019 award.</strong></p><p line="GJOc">&nbsp;</p><p line="BFaY">All entrants shall be natives of or have been living for at least two years in one of the UNESCO Creative Cities or Hong Kong.</p><p line="put5">Entries shall be submitted only by the nominator, or by the designer or the team’s representative with the authorization by the nominator. Each entrant can submit no more than 10 pieces of works.</p>`
          ]
        },
        award: {
          title: "AWARDING CEREMONY",
          intro: `<p>Awarding ceremony is postponed and rescheduled to take place in Shenzhen in July 2020 during Shenzhen Design Week. All winners including the best nominator prize winners will be invited to the awarding ceremony, and relevant forums, exhibitions and theme speeches.</p><p>Flight ticket and three nights&nbsp;local accommodation for each winner (one member if the winner is a team or an administrative department) will be provided by the organizer, i.e. SDPA.</p>`
        },
        must_eligibility: [
          {
            title: "Professional Group",
            intro: `<p>Entrant can be individuals or teams. For a nominated individual, he or she shall be aged 35 or below by December 31, 2019. For a nominated team, all of its members shall be aged 35 or below by December 31, 2019.</p><p>Entrants from architectural design shall be aged 40 or below by December 31, 2019.</p>`,
            tips: "— 2019.12.31（aged 35 or below, 40 for architects）"
          },
          {
            title: "Student Group",
            intro: `<p>For the student group, entrants shall remain registered students in colleges or other educational institutions by January 1, 2020.</p>`,
            tips: "— 2020.01.01（registered student）"
          }
        ]
      },
      list: [],
      cate: {
        title: "Must Knows"
      }
    };
  },
  computed: {
    ...mapGetters(["award", "schedule"])
  },
  components: {
    Button
  }
};
</script>

<style scoped lang="scss">
.section-container {
  text-align: center;
  &.bg-primary {
    color: #fff;
  }
  .spec-title,
  .spec-intro {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .eligibility {
    .spec-title,
    .spec-intro {
      max-width: 1000px;
    }
  }

  .spec-title {
    font: 700 36px/1.38 "Futura";
    letter-spacing: 0.05em;
  }
  .spec-intro {
    margin-top: 30px;
    font: 500 18px/40px "Futura";
    letter-spacing: 0.01em;
    color: gray;
  }

  .award-wrapper {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 40px;
  }

  .award-wrap-list {
    text-align: left;
    .award-type {
      margin: 18px 0 0 20px;
      font-size: 26px;
    }

    ul {
      li {
        figure {
          display: flex;
          padding: 0 20px;
          margin-top: 35px;
          position: relative;
          font-weight: 300;

          img {
            width: 66px;
            margin-right: 20px;
          }

          h4 {
            font-weight: 300;
            font-size: 24px;
          }

          .award-reward {
            color: #808080;
            margin: 15px 0 0 0;
            font-size: 16px;
          }

          .award-amount {
            font-size: 24px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }
  }

  .schedule-list {
    .schedule-item {
      position: relative;
      padding: 40px 0 40px 490px;
      border-bottom: 1px solid #fff;

      .schedule-title {
        position: absolute;
        top: 40px;
        left: 0;
        font: 700 28px/40px "Futura";
        letter-spacing: 0.02em;
      }

      .schedule-intro {
        font: 700 24px/40px "Futura";
        letter-spacing: 0.02em;
        text-align: left;
      }
    }
  }
  .index-about {
    margin: 80px auto 90px auto;
    text-align: center;
    max-width: 900px;
    line-height: 1.8;
    font: 500 18px/40px "Futura";
    letter-spacing: 0.01em;
  }

  ul.list {
    margin-top: 80px;
    &.requisites {
      .item-intro {
        font: 500 20px/40px "Futura";
        margin: 0 20px;
      }
    }
    &.submission {
      li.list-item {
        width: 33.3%;
        &:nth-child(n + 3) {
          margin-top: 0;
        }
        &:nth-child(n + 4) {
          margin-top: 60px;
        }
        .item-inner {
          margin: 0 20px;
          border-top: 1px solid #dbdbdb;
          .item-num {
            margin-bottom: 40px;
            display: block;
            margin-left: 20px;
            margin-top: 1em;
            font: 700 24px/40px "Futura";
            color: #202020;
            letter-spacing: 0.02em;
          }
          .item-img {
            display: inline-block;
            vertical-align: top;
            width: 120px;
          }
          .item-intro {
            display: inline-block;
            vertical-align: top;
            width: calc(100% - 140px);
            font: 500 16px/30px "Futura";
            color: gray;
            letter-spacing: 0.02em;
          }
        }
      }
    }
    li.list-item {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      text-align: left;
      &:nth-child(n + 3) {
        margin-top: 60px;
      }
      .inner-item {
        border-top: 1px solid #dbdbdb;
        padding: 20px 20px 0;
        margin: 0 20px;
        .item-title {
          margin-top: 0.25em;
          font: 700 24px/1.65 "sans-serif";
          letter-spacing: 0.02em;
          margin-bottom: 30px;
        }
        .item-intro {
          font: 500 18px/30px "Futura";
          letter-spacing: 0.02em;
          color: gray;
        }
        .item-tips {
          margin-top: 50px;
          color: $primary;
          font: 500 18px/30px "Futura";
          letter-spacing: 0.02em;
        }
      }
    }
    &.categories {
       text-align: left;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: repeat(3, 1fr);
       grid-gap: 80px 40px;
      li {
        width: 100%;
        &:nth-child(n + 3) {
          margin-top: 0;
        }

        .inner-item {
          margin: 0;
          &::after {
            right: 40px;
            left: 40px;
            bottom: 40px;
            position: absolute;
            content: "";
            display: block;
            height: 3px;
            background: $primary;
          }
          background-color: #f5f5f5;
          padding: 40px;
          height: 580px;
          position: relative;
          .item-img {
            border-bottom: 3px solid $primary;
          }
          .item-title {
            color: #202020;
          }
        }
      }
    }
  }
}
</style>
